<template>
	<view :data-theme="theme">
		<view class="new-users copy-data">
			<view class="container">
				<!-- 用户信息区域 -->
				<view class="user-section">
					<view class="user-info">
						<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
						<view class="user-details">
							<view class="level-badge">Lv.1</view>
							<text class="username">kafuka</text>
							<view class="task-progress">
								<text class="task-text">投注任务</text>
								<text class="progress-text">0/0</text>
							</view>
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: '0%' }"></view>
							</view>
						</view>
					</view>

					<view class="balance-section">
						<view class="balance">
							<text class="currency">¥</text>
							<text class="amount">0</text>
						</view>
						<view class="action-buttons">
							<button class="btn-recharge">充值</button>
							<button class="btn-withdraw">提现</button>
						</view>
					</view>
				</view>

				<!-- 功能区域 -->
				<view class="features-section">
					<view class="features-grid">
						<view class="feature-item" v-for="(feature, index) in features" :key="index">
							<view class="feature-icon" :style="{ backgroundColor: feature.color }">
								<text class="icon">{{ feature.icon }}</text>
							</view>
							<text class="feature-name">{{ feature.name }}</text>
						</view>
					</view>
				</view>

				<!-- 菜单列表 -->
				<view class="menu-section">
					<view class="menu-item" v-for="(menu, index) in menuList" :key="index"
						@click="handleMenuClick(menu)">
						<view class="menu-left">
							<text class="menu-icon">{{ menu.icon }}</text>
							<text class="menu-name">{{ menu.name }}</text>
						</view>
						<text class="menu-arrow">></text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="bottomNavigationIsCustom" class="footerBottom"></view>
		<pageFooter></pageFooter>
	</view>
</template>
<script>
let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
import {
	mapGetters
} from "vuex";
import {
	tokenIsExistApi
} from '@/api/api.js';
// #ifdef H5
import Auth from '@/libs/wechat';
import {
	setThemeColor
} from '@/utils/setTheme.js'
import tuiSkeleton from '@/components/base/tui-skeleton.vue';
import pageFooter from "@/components/pageFooter/index.vue";
const app = getApp();
export default {
	computed: mapGetters(['isLogin', 'chatUrl', 'uid', 'globalData', 'bottomNavigationIsCustom',
		'merchantEmployeeList', 'isEmployee', 'selectMerId'
	]),
	data() {
		return {
			scrollHeight: 0,
			triggered: false,
			isRefresher: false, //下拉刷新状态
			urlDomain: this.$Cache.get("imgHost"),
			showSkeleton: true, //骨架屏显示隐藏
			centerBanner: [],
			userMenu: [],
			autoplay: true,
			circular: true,
			interval: 3000,
			duration: 500,
			isAuto: false, //没有授权的不会自动授权
			isShowAuth: false, //是否隐藏授权
			orderStatusNum: {},
			centerMenu: [],
			wechatUrl: [],
			servicePic: '',
			sysHeight: sysHeight,
			// #ifdef MP
			pageHeight: '100%',
			// #endif
			// #ifdef H5 || APP-PLUS
			pageHeight: '',
			// #endif
			// #ifdef H5
			isWeixin: Auth.isWeixin(),
			//#endif
			configApi: {}, //分享类容配置
			theme: app.globalData.theme,
			bgColor: '#e93323',
			userInfo: {},
			copyImage: '',
			assureDrawer: false,
			amount: null,
			types: 1,
			infolist: {},
			features: [
				{ name: '购彩记录', icon: '✓', color: '#ff9500' },
				{ name: '账单明细', icon: '📋', color: '#007aff' },
				{ name: '提现记录', icon: '💰', color: '#34c759' },
				{ name: '充值记录', icon: '💳', color: '#ff3b30' }
			],
			menuList: [
				{ name: '银行资料', icon: '💳' },
				{ name: '密码设置', icon: '🔒' },
				{ name: '联系客服', icon: '💬' },
				{ name: '基本资料', icon: 'ℹ️' },
				{ name: '系统设置', icon: '⚙️' }
			]
		}
	},
	components: {
		tuiSkeleton,
		pageFooter
	},
	onLoad() {
		let that = this;
		// #ifdef H5 || APP-PLUS
		that.$set(that, 'pageHeight', this.globalData.windowHeight);
		// #endif
		that.$set(that, 'centerMenu', this.globalData.centerMenu);
		// #ifdef H5
		//that.shareApi();
		// #endif
		that.bgColor = setThemeColor();
		// #ifdef APP-PLUS
		setTimeout(() => {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: that.bgColor,
			});
		}, 500)
		// #endif
		// #ifdef MP
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: that.bgColor,
		});
		// #endif
	},
	onShow: function () {
		// let query = uni.createSelectorQuery();
		// let dom = query.select('.new-users');
		// #endif
	},
	methods: {
		handleMenuClick(menu) {
			console.log('点击菜单:', menu.name)
			// 处理菜单点击事件
		},
		//校验token是否有效,true为有效，false为无效
		getTokenIsExist() {
			tokenIsExistApi().then(res => {
				let tokenIsExist = res.data;
				if (!tokenIsExist) {
					this.$store.commit('UPDATE_LOGIN', '');
					this.$store.commit('UPDATE_USERINFO', {});
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.container {
	// min-height: 100vh;
	height: 100%;
}

.user-section {
	padding: 30rpx 20rpx;
	background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
	color: white;
}

.user-info {
	display: flex;
	align-items: flex-start;
	margin-bottom: 30rpx;
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 25rpx;
}

.user-details {
	flex: 1;
}

.level-badge {
	background-color: #ff6600;
	color: white;
	padding: 6rpx 15rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	margin-bottom: 10rpx;
	display: inline-block;
}

.username {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 20rpx;
}

.task-progress {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10rpx;
	font-size: 24rpx;
	color: #ccc;
}

.progress-bar {
	height: 6rpx;
	background-color: #444;
	border-radius: 3rpx;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background-color: #ff6600;
	transition: width 0.3s ease;
}

.balance-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.balance {
	display: flex;
	align-items: baseline;
}

.currency {
	font-size: 40rpx;
	color: #ffd700;
	margin-right: 10rpx;
}

.amount {
	font-size: 60rpx;
	font-weight: bold;
	color: #ffd700;
}

.action-buttons {
	display: flex;
	gap: 20rpx;
}

.btn-recharge,
.btn-withdraw {
	padding: 16rpx 32rpx;
	border-radius: 25rpx;
	border: none;
	font-size: 28rpx;
	font-weight: bold;
}

.btn-recharge {
	background-color: #ff6600;
	color: white;
}

.btn-withdraw {
	background-color: #4a90e2;
	color: white;
}

.features-section {
	background-color: #f5f5f5;
	padding: 30rpx 20rpx;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30rpx;
}

.feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.feature-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15rpx;
}

.icon {
	font-size: 40rpx;
	color: white;
}

.feature-name {
	font-size: 24rpx;
	color: #666;
}

.menu-section {
	background-color: #f5f5f5;
	padding: 0 20rpx;
}

.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: white;
	padding: 30rpx 25rpx;
	margin-bottom: 2rpx;
	border-radius: 0;
}

.menu-item:first-child {
	border-top-left-radius: 15rpx;
	border-top-right-radius: 15rpx;
}

.menu-item:last-child {
	border-bottom-left-radius: 15rpx;
	border-bottom-right-radius: 15rpx;
	margin-bottom: 0;
}

.menu-left {
	display: flex;
	align-items: center;
}

.menu-icon {
	font-size: 32rpx;
	margin-right: 20rpx;
}

.menu-name {
	font-size: 30rpx;
	color: #333;
}

.menu-arrow {
	font-size: 32rpx;
	color: #ccc;
}
</style>
